<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
		}
		canvas{
			width: 320px;
			height: 160px;
			background: url('./p_1.jpg');
		}
	</style>
</head>
<body>
	<canvas id="c" width="320" height="160"></canvas>
	<script type="text/javascript">
		
		var canvas = document.getElementById('c');
     	var ctx = canvas.getContext('2d');
     	ctx.beginPath();
		ctx.fillStyle="#666";
		ctx.fillRect(0,0,canvas.width,canvas.height);
		ctx.closePath();
		ctx.globalCompositeOperation="destination-out";

		canvas.addEventListener('mousedown',function(){
			canvas.addEventListener('mousemove',guagua);
		})

		function guagua(e){
			var e= e||window.event;
			ctx.beginPath();
			ctx.arc( e.offsetX, e.offsetY,20,20,Math.PI*2,true);
			ctx.fillStyle="red";
			ctx.fill();
			ctx.closePath();
		}

		canvas.addEventListener('mouseup',function(){
			c.removeEventListener('mousemove',guagua);
		})

	</script>
</body>
</html>
